<template>
    <div>
      <div v-if="loading" class="loading-status">
        <div class="loader"></div>
        <span>正在加载更多文章...</span>
      </div>
  
      <div v-if="noMore" class="no-more">
        <p>已经到底啦 ~</p>
      </div>
  
      <div v-if="error" class="error-message">
        {{ error }}
        <button @click="$emit('retry')">重新加载</button>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    loading: Boolean,
    noMore: Boolean,
    error: String
  });
  
  defineEmits(['retry']);
  </script>
  
  <style scoped>
  .loading-status {
    text-align: center;
    padding: 30px 0;
    color: #666;
  }
  
  .no-more {
    text-align: center;
    padding: 20px;
    color: #95a5a6;
    font-size: 0.9em;
  }
  
  .error-message {
    text-align: center;
    padding: 20px;
    background: #fee;
    border-radius: 8px;
    color: #e74c3c;
    margin: 20px 0;
  }
  
  .error-message button {
    margin-top: 10px;
    padding: 8px 20px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  
  .error-message button:hover {
    opacity: 0.9;
  }
  
  .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  </style>